<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<div class="modal fade" id="qReserv1" tabindex="-1" role="dialog"
	data-backdrop="static">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close cancel1">×</button>
				<h3 class="modal-title">빠른예약</h3>
			</div>
			<input type="hidden" id="step" value="" /> <input type="hidden"
				id="type" value="" /> <input type="hidden" id="local" value="" />
			<input type="hidden" id="kind" value="" /> <input type="hidden"
				id="sno" value="" />

			<div class="modal-body">
				<div class="row">
					<div class="col1">
						<ul id="ul1" class="list-unstyled qrList"></ul>
					</div>
					<div class="col1">
						<ul id="ul2" class="list-unstyled qrList"></ul>
					</div>
					<div class="col1">
						<ul id="ul3" class="list-unstyled qrList"></ul>
					</div>
					<div class="col2">
						<ul id="ul4" class="list-unstyled qrList"></ul>
					</div>
					<div class="col3">
						<div class="detail">
							<table class="table table-bordered">
								<tr>
									<td><label>서비스명</label></td>
									<td><div class="overflow">
											<span id="title"></span>
										</div></td>
								</tr>
								<tr>
									<td><label>일자</label></td>
									<td><div class="overflow">
											<span id="rDate"></span>
										</div></td>
								</tr>
								<tr>
									<td><label>문의전화</label></td>
									<td><div class="overflow">
											<span id="phone"></span>
										</div></td>
								</tr>
							</table>
						</div>
						<div>
							<div class="alert alert-info">예약현황</div>
							<div class="calwrap">
								<div id="qr1Cal"></div>
								<div>
									<span>-예약가능</span><span>-예약마감</span>
								</div>
								<div>
									<p>※ 위 예약현황은 수시로 변경 될 수 있어 예약 신청시 예약현황과 다를 수 있습니다</p>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>

			<div class="modal-footer">
				<button type="button" class="btn btn-primary" id="nextReserv">예약
					신청하기</button>
				<button type="button" class="btn btn-default cancel1">취소</button>
			</div>

		</div>
	</div>
</div>
<script>
	$("#showqr").click(function() {
		var isLogin = "${ isLogin }";
		if (isLogin.length > 0) {
			$("#qReserv1").modal({
				show : true,
				keyboard : false
			});
			
			setProperty(null, "qr1Cal");
			drawCal();
		} else {
			alert("회원 로그인이 필요한 서비스입니다.");
		}
	});

	$("#nextReserv").click(function() {
		if ($("#sno").val().length <= 0) {
			alert("서비스가 선택되지않았습니다.");
		} else {
			if (confirm("다음 예약을 진행하시겠습니까?")) {
				$("#qReserv1").modal("hide");
				$("#qReserv2").modal("show");
			}
		}
	});
	$(".cancel1").click(function() {
		$("#qReserv1").modal("hide");
	});

	$('#qReserv1').on("show.bs.modal", function() {
		removeAll();
		getCategory();
	});

	function removeAll() {
		$("#ul1").empty();
		$("#ul2").empty();
		$("#ul3").empty();
		$("#ul4").empty();
		$("#step").val("");
		$("#type").val("");
		$("#local").val("");
		$("#kind").val("");
		$("#sno").val("");
		removeDetail();
	};
	function removeDetail() {
		$("#title").html("");
		$("#rDate").html("");
		$("#phone").html("");
	};

	function getCategory() {
		$("#step").val(0);
		getQRList($("#ul1"), null);
	};

	$("#ul1").on("click", ".step1", function() {
		$("#ul2").empty();
		$("#ul3").empty();
		$("#ul4").empty();
		
		$("#local").val("");
		$("#kind").val("");
		$("#sno").val("");
		
		removeDetail();

		$("#step").val(1);
		var val = $(this).html();
		getQRList($("#ul2"), val);
	});

	$("#ul2").on("click", ".step2", function() {
		$("#ul3").empty();
		$("#ul4").empty();
		
		$("#kind").val("");
		$("#sno").val("");
		
		removeDetail();

		$("#step").val(2);
		var val = $(this).html();
		getQRList($("#ul3"), val);
	});

	$("#ul3").on("click", ".step3", function() {
		$("#ul4").empty();
		
		$("#sno").val("");
		
		removeDetail();

		$("#step").val(3);
		var val = $(this).html();
		getQRList($("#ul4"), val);
	});

	$("#ul4").on("click", ".step4", function() {
		$("#step").val(4);
		var val = $(this).attr("id");
		getQRList(null, val);
	});

	function getQRList(object, value) {
		var step = $("#step").val();

		if (step == 1) {
			if (value == "체육시설")
				$("#type").val("gym");
			else if (value == "시설대관")
				$("#type").val("pub");
		} else if (step == 2) {
			$("#local").val(value);
		} else if (step == 3) {
			$("#kind").val(value);
		} else if (step == 4) {
			$("#sno").val(value);
		}

		var type = $("#type").val();
		var local = $("#local").val();
		var kind = $("#kind").val();
		var sno = $("#sno").val();

		$.ajax({
			url : "/Reservation/reserv/qreserv.res",
			data : {
				step : step,
				type : type,
				local : local,
				kind : kind,
				sno : sno
			},
			dataType : "json",
			success : function(list) {
				if (step == 3) {
					for ( var i in list) {
						var sno = list[i].sno;
						var title = decodeURI(list[i].title)
								.replace(/\+/g, " ");
						object.append("<li><a href='#' id='" + sno
								+ "'class='step" + (parseInt(step) + 1) + "'>"
								+ title + "</a></li>");
					}

				} else if (step == 4) {
					var title = decodeURI(list.title).replace(/\+/g, " ");
					var phone = list.phone;
					var rsDate = new Date(list.rsDate);
					var reDate = new Date(list.reDate);

					var rDate = rsDate.getFullYear() + "-" + (rsDate.getMonth() + 1)
							+ "-" + rsDate.getDate() + " ~ "
							+ reDate.getFullYear() + "-" + (reDate.getMonth() + 1)
							+ "-" + reDate.getDate();
					$("#title").html(title);
					$("#rDate").html(rDate);
					$("#phone").html(phone);
					
					setProperty($("#sno").val(), "qr1Cal");
					process();
				} else {
					for ( var i in list) {
						var str = decodeURI(list[i]);
						object.append("<li><a href='#' class='step"
								+ (parseInt(step) + 1) + "'>" + str
								+ "</a></li>");
					}
				}
			}
		});
	};
</script>
